<template>
  <div class="demo">
    <h1>{{ msg }}</h1>
    <h1>学生名称:{{ name }}</h1>
    <!-- 接收到的age有数据绑定 所以age的值肯定为表达式 是可以直接进行运算的 -->
    <h1>学生年龄:{{ myAge+1 }}</h1>
    <h1>学生性别:{{ sex }}</h1>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: "学生是我",
      myAge: this.age,
    };
  },
  methods: {
    updateAge() {
      this.myAge++;
    },
  },
  // 三种父组件传值给子组件的方式:

  // 1.父组件传值给子组件之简单接收(不要数据进行校验)
  props: ["name", "age", "sex"],

  // 2.父组件传值给子组件之限制数据类型接收(就是类型不对还是会接收 但是使用时会报错提示)
  // props: {
  //   name: String,
  //   age: Number,
  //   sex: String,
  // },

  // 3.父组件传值给子组件之 限制数据类型+指定默认值+必要性的限制
//   props: {
//     name: {
//       type:String,//name的数据类型
//       required:true//不能为空 name必传
//     },
//       age: {
//       type:Number,
//       default:99//不传值时 默认99
//     },
//       sex: {
//       type:String,
//       required:true
//     },
//   }
};
</script>

<style>
.demo {
  background-color: blueviolet;
}
</style>